<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div class="table-container">
          <!-- 查询区域 -->
          <div class="table-page-search-wrapper">
            <a-form-model layout="inline" @keyup.enter.native="searchQuery">
              <a-row>
                <a-col :span="5">
                  <a-form-model-item>
                    <a-input
                      v-model="queryParam.searchValue"
                      placeholder="请输入客户名称/细胞编号"
                    >
                      <a-icon slot="prefix" class="font-placeholder" type="search" />
                    </a-input>
                  </a-form-model-item>
                </a-col>
                <a-col :span="6" :offset="1" class="table-page-search-submitButtons">
                  <a-button @click="searchQuery" type="primary">查询</a-button>
                  <a-button @click="searchReset" type="danger">重置</a-button>
                </a-col>
              </a-row>
            </a-form-model>
          </div>

          <!-- 操作按钮区域 -->
          <div class="table-operator">
            <a-button @click="handleAdd" type="primary" v-has="['cellStorageInsert']">新增冻存记录</a-button>
            <a-button @click="exportExcel" :loading="exportLoading" v-has="['cellStorageExport']">导出冻存记录</a-button>
          </div>

          <!-- 表格区域 -->
          <a-row>
            <a-col :span="24">
              <ry-table
                :columns="columns"
                :loading="loading"
                :data-source="dataSource"
                :rowKey="record => record.id"
                :pagination="ipagination"
                bordered
                :scroll="{ x: 'max-content' }"
              >
                <!-- 客户名称 -->
                <template slot="nickname" slot-scope="{ text, record }">
                  <span>{{ text || (record.businessAccount && record.businessAccount.nickname) || '--' }}</span>
                </template>



                <!-- 项目名称：多值字典 tag -->
                <template slot="applyProject" slot-scope="{ text, record }">
                  <span>
                    <a-tag color="blue">
                      {{ $getDictName('APPLY_PROJECT', record.applyProject) }}
                    </a-tag>
                  </span>
                </template>

                <!-- 状态（如有字典 storage_status，可替换） -->
                <template slot="status" slot-scope="{ text }">
                  <span>{{ getStatusLabel(text) }}</span>
                </template>

                <!-- 操作 -->
                <template slot="action" slot-scope="{ record }">
                  <a-space size="middle">
                    <a-button v-has="['cellStorageEdit']" type="primary" @click="handleEdit(record)">编辑</a-button>
                    <a-button v-has="['cellStorageOut']" type="danger" @click="handleOut(record)">冻存复苏</a-button>
                    <a-button v-has="['cellStorageDel']" type="default" @click="handleDelete(record.id)" v-if="record.status === '4' && record.outbounds.length === 0">删除</a-button>
                  </a-space>
                </template>
              </ry-table>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>

    <!-- 弹窗组件 -->
    <CellStorageModal ref="modalForm" @ModalOk="modalFormOk" />
    <ResuscitationModel
      ref="outModal"
      @ModalOk="modalFormOk"
      :status="2" />
  </div>
</template>

<script>
import { RyListMixin } from '@/ryweb'
import CellStorageModal from './modules/CellStorageModal.vue'
import ResuscitationModel from "./modules/ResuscitationModel.vue";
import { cellStorage } from '@/apilist/permission' // 你在 permission.js 中配置的接口
import { exportExcel } from '@/utils/export.js'

export default {
  name: 'CellStorage',
  mixins: [RyListMixin, exportExcel],
  components: { CellStorageModal, ResuscitationModel},
  data() {
    return {
      selectedRowKeys: [],
      exportLoading: false,
      queryParam: {
        searchValue: ''
      },
      loading: false,
      url: {
        list:   cellStorage.list,    // tCellStorageLocation/list
        add:    cellStorage.insert,  // tCellStorageLocation/insert
        edit:   cellStorage.update,  // tCellStorageLocation/update
        delete: cellStorage.delete,  // tCellStorageLocation/delete
        byId:   cellStorage.byId,    // 详情（请确认后端配置）
        exportFile: cellStorage.exportFile
      },
      outUrl: {
        list: this.$api.permission.cellList.outList,      // 查询出库记录
        insert: this.$api.permission.cellList.outInsert,  // 新增出库
      },
      columns: [
        /* === 新增细胞相关列（和冻存对齐） === */
        { title: '客户名称', align: 'center', dataIndex: 'nickname',     scopedSlots: { customRender: 'nickname' } },
        { title: '客户编码', align: 'center', dataIndex: 'serialNumber' },
        { title: '项目名称', align: 'center', dataIndex: 'applyProject', scopedSlots: { customRender: 'applyProject' } },
        { title: '细胞编号', align: 'center', dataIndex: 'cellCode' },
        { title: '细胞管数(原)', align: 'center', dataIndex: 'originalCellNum'},
        { title: '细胞管数(余)', align: 'center', dataIndex: 'cellNum'},
        { title: '细胞数量', align: 'center', dataIndex: 'quantity'},

        /* === 原始存储字段 === */
        // { title: '样品编号',       align: 'center', dataIndex: 'cellCode' },
        { title: '最近检查时间',   align: 'center', dataIndex: 'lastInspection' },
        // { title: '状态',         align: 'center', dataIndex: 'status', scopedSlots: { customRender: 'status' } },
        { title: '创建人',       align: 'center', dataIndex: 'createBy' },
        { title: '创建时间',       align: 'center', dataIndex: 'createTime' },
        { title: '操作', align: 'center', fixed: 'right', scopedSlots: { customRender: 'action' } }
      ]
    }
  },

  methods: {
    /* 多值分隔 */
    splitCodes(val) {
      if (!val) return []
      return String(val).split(',').map(s => s.trim()).filter(Boolean)
    },

    async exportExcel () {
      this.exportLoading = true
      await this.exportXlsNotDate(this.url.exportFile, this.queryParam, '细胞储藏记录导出文件', false)
      this.exportLoading = false
    },

    /* 状态字典映射（如没有 storage_status，则直接显示原值） */
    getStatusLabel(val) {
      if (val == null || val === '') return '--'
      const txt = this.$getDictName('storage_status', val)
      return txt || val
    },

    /* 查询 */
    searchQuery() {
      this.loadData(1)
    },

    /* 重置 */
    searchReset() {
      this.queryParam.searchValue = ''
      this.loadData(1)
    },

    /* 新增 */
    handleAdd() {
      this.$refs.modalForm.open() // 新增
    },

    /* 编辑 */
    handleEdit(record) {
      // 把详情 URL 传给子组件（如果你在子组件内部引用 permission，可省略）
      this.$refs.modalForm.open(record)
    },
    handleOut(record) {
      this.$refs.outModal.open(record);  // 打开出库弹框
    },

    /* 弹窗成功回调 */
    modalFormOk() {
      this.loadData()
    },

    onSelectChange(selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>

<style lang="less" scoped>
.table-page-search-wrapper {
  margin-left: 0;
}
.table-page-search-submitButtons {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 20px;
}
.table-operator {
  margin-bottom: 16px;
}
</style>
